<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组随机排序</title>
		<style type="text/css">
		/* -------固定模板start------ */
			body {
				background-color: #FFFAE8;
			}

			#box {
				width: 777px;

				border: 9px dotted #CFB56A;
				margin: 188px auto;
				text-align: center;
				font-size: 18px;
				padding-bottom: 50px;
			}

			h1 {
				color: #41A863;
				font-size: 58px;
			}

			input {
				height: 30px;
				padding-left: 10px;
				font-size: 16px;
			}

			button {
				height: 50px;
				line-height: 50px;
				width: 200px;
				background-color: transparent;
				border: 1px solid #66B1FF;
				border-radius: 50px;
				font-size: 20px;
				color: #66B1FF;
			
			}

			button:hover {
				background-color: #66B1FF;
				color: #fff;
			}

			#result {				
				width: 288px;
				margin: 0 auto;
				color: #CB2D01;
				font-size: 36px;
			}
			/* -------固定模板end------ */
			#result p{
				text-align: left;
			}
			
		</style>
	</head>
	<body>

		<div id="box">

			<h1>数组随机排序</h1>
			<p>请输入开始数：<input type="" name="" id="start" value="" /></p>
			<p>请输入结尾数：<input type="" name="" id="end" value="" /></p>
			<p><button type="button" onclick="random()">点击获取结果</button></p>
			<div class="b1" id="result">
			</div>

		</div>

		<script type="text/javascript">
		
			function random() {
				var start = parseInt(document.querySelector('#start').value);				
				var end = parseInt(document.querySelector('#end').value);
				var num = end - start + 1;
				// console.log(start);
				if(isNaN(start)||isNaN(end)){
					alert('请输入数字')
				}
				// 生成范围数组
				var arr = [];
				for (var i = 0; i < num; i++) {
					arr[i] = start++;
				}
				// 数组随机排序
				var len = arr.length;
				var map = new Map();
				// console.log('len', len);
				for (var i = 0; i < len; i++) {
					var index = Math.floor(Math.random() * len);
					var temp = arr[index];
					arr[index] = arr[i];
					arr[i] = temp;
					// map.set('第' + (i+1) + '个', arr[i]);//放在这里竟然不行

				}
				// 写入map
				for (var i = 0; i < len; i++) {
					map.set('第' + (i + 1) + '个', arr[i]);
				}
				var maps = "";
				// 遍历map
				for (var [key, value] of map) {
					// console.log('map的值'+key+'='+value);
					maps += '<p>'+key + '：' + value+"，"+'</p>';

				}
				// console.log(arr);
				// console.log('map-->', map);
				// document.querySelector('#result').innerHTML = arr;
				document.querySelector('#result').innerHTML = maps;
			}

	
		</script>

		
	</body>
</html>
